<template>
  <div>
    <!--搜索栏-->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input
          v-model="params.data"
          placeholder="请输入表名称"
          clearable
        />
      </el-col>
      <el-col :span="2">
        <el-button icon="el-icon-search" type="success" @click="page">搜索</el-button>
      </el-col>
      <el-col :span="2">
        <el-button icon="el-icon-plus" type="primary" @click="insert">新增</el-button>
      </el-col>
    </el-row>
    <!--表格-->
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="borrowName" label="借款人姓名" sortable />
      <el-table-column prop="borrowType" label="借款方式" />
      <el-table-column label="借款日期" sortable>
        <template slot-scope="scope">{{ scope.row.borrowTime | date }}</template>
      </el-table-column>
      <el-table-column prop="amount" label="借款金额" sortable />
      <el-table-column prop="relation" label="关系" sortable />
      <el-table-column prop="purpose" label="用途" sortable />
      <el-table-column prop="rate" label="利息" sortable />
      <el-table-column label="归还时间" sortable>
        <template slot-scope="scope">{{ scope.row.returnTime | date }}</template>
      </el-table-column>
      <el-table-column prop="priority" label="优先级" sortable />
      <!--      <el-table-column prop="borrowPath" label="借款证明" sortable/>-->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small">还款</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      :current-page="query.current"
      :page-size="query.size"
      :page-sizes="[10,20,50,100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!--新增-->
    <el-dialog
      title="新增借款信息"
      :visible.sync="insertVisible"
      width="60%"
    >
      <el-form ref="addFormRef" :model="addForm" :rules="addFromRules" label-width="120px" class="demo-ruleForm">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="借款姓名：" prop="borrowName" required>
              <el-input v-model="addFromRules.borrowName" clearable="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="借款方式：" prop="borrowType" required>
              <el-select v-model="addForm.borrowType" placeholder="请选择借款方式" clearable="true">
                <el-option label="微信" value="0" />
                <el-option label="支付宝" value="1" />
                <el-option label="银行卡" value="2" />
                <el-option label="现金" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="借款金额：" prop="amount" required>
              <el-input v-model="addForm.amount" type="number" clearable="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归还日期：" prop="relation" required>
              <el-date-picker v-model="addForm.returnTime" type="datetime" placeholder="选择归还日期" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="借款利息：" prop="rate">
              <el-input v-model="addForm.rate" type="number" clearable="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="借款用途：" prop="purpose" required>
              <el-select v-model="addForm.purpose" placeholder="请选择借款用途" clearable="true">
                <el-option label="买房" value="0" />
                <el-option label="看病" value="1" />
                <el-option label="投资" value="2" />
                <el-option label="其他" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="优先级：" prop="priority">
              <el-radio-group v-model="addForm.priority">
                <el-radio label="高" />
                <el-radio label="低" />
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="借款人关系：" required>
              <el-select v-model="addForm.relation" placeholder="请选择借款人关系" clearable="true">
                <el-option label="父母" value="0" />
                <el-option label="朋友" value="1" />
                <el-option label="子女" value="2" />
                <el-option label="其他" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="借款日期：" required>
              <el-date-picker v-model="addForm.borrowTime" type="datetime" placeholder="选择借款日期" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-tag type="danger">请上传相关的证明材料！</el-tag>
          <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
          >
            <i slot="default" class="el-icon-plus" />
            <div slot="file" slot-scope="{file}">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in" />
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                  <i class="el-icon-download" />
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="insertVisible = false">取 消</el-button>
        <el-button type="primary" @click="insertVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { page } from '../../api/borrow/borrow'

export default {
  data() {
    return {
      query: {
        current: 0,
        size: 10
      },
      params: {
        data: null
      },
      headers: {},
      tableData: [],
      total: 0,
      insertVisible: false,
      addForm: {
        borrowName: null,
        borrowType: null,
        borrowTime: new Date(),
        relation: null,
        purpose: null,
        rate: 0,
        returnTime: new Date(),
        priority: '高'
      },
      addFromRules: {
        borrowName: null,
        borrowType: null,
        borrowTime: null,
        relation: null,
        purpose: null,
        rate: null
      }
    }
  },
  mounted() {
    this.page()
  },
  methods: {
    insert() {

    },
    async page() {
      await page(this.query, this.headers).then(res => {
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total
      }).catch(err => {
        console.error(err)
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(newSize) {
      this.query.size = newSize
      this.getAllCodeConfigData()
    },
    handleCurrentChange(newCurrentPage) {
      this.query.current = newCurrentPage
      this.page()
    },
    insert() {
      this.insertVisible = true
    }
  }
}
</script>

<style scoped>
  .el-tag {
    margin-bottom: 10px;
  }
</style>
